<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  props: {
    that: Object,
  },
  setup(props) {
    return { that: props.that };
  },
  render() {
    let that = this.that;
    return (
      <div class="styleValue">
        <span>宽度</span>
        <div style={{ maxWidth: "100%", display: "flex" }}>
          <a-input-number
            value={this.$store.state.aimAttrs.colWidth[0]}
            onChange={(e) => {
              this.$store.commit("aimAttrsChange", {
                newValue: [0, e],
                attrsName: "colWidth",
                that,
              });
            }}
            min={10}
            max={
              this.$store.state.aimAttrs.colWidth.length == "3"
                ? 96 -
                  this.$store.state.aimAttrs.colWidth[1] -
                  this.$store.state.aimAttrs.colWidth[2]
                : 96 - this.$store.state.aimAttrs.colWidth[1]
            }
            controls-position="right"
          ></a-input-number>
          <span style={{ margin: "5px" }}>:</span>
          <a-input-number
            value={this.$store.state.aimAttrs.colWidth[1]}
            change={(e) => {
              this.$store.commit("aimAttrsChange", {
                newValue: [1, e],
                attrsName: "colWidth",
                that,
              });
            }}
            min={10}
            max={
              this.$store.state.aimAttrs.colWidth.length == "3"
                ? 96 -
                  this.$store.state.aimAttrs.colWidth[0] -
                  this.$store.state.aimAttrs.colWidth[2]
                : 96 - this.$store.state.aimAttrs.colWidth[0]
            }
            controls-position="right"
          ></a-input-number>
          {this.$store.state.aimAttrs.colWidth.length == "3" && (
            <span style={{ margin: "5px" }}>:</span>
          )}
          {this.$store.state.aimAttrs.colWidth.length == "3" && (
            <a-input-number
              value={this.$store.state.aimAttrs.colWidth[2]}
              onChange={(e) => {
                this.$store.commit("aimAttrsChange", {
                  newValue: [2, e],
                  attrsName: "colWidth",
                  that,
                });
              }}
              min={10}
              max={
                96 -
                this.$store.state.aimAttrs.colWidth[1] -
                this.$store.state.aimAttrs.colWidth[0]
              }
              controls-position="right"
            ></a-input-number>
          )}
        </div>
      </div>
    );
  },
});
</script>
